<template>
  <div id="leftone" style="display: inline-block">
    <div class="leftone-left">
      <div class="smBox">
         <div class="left1" ref="chart11"></div>
         <div class="left2" ref="chart12"></div>
      </div>
      <div class="right3" ref="chart13"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "leftone",
  components: {},
  data() {
    return {
      option11: {
        title: [
          {
            text: "各工序目标数量",
            left: "center",
            top: "1%",
            textStyle: {
              color: "#ffffff",
            },
          },
        ],
        animation: true,
        legend: {
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
          orient: "vertical",
          right: "0",
          bottom: "0",
          top: "10%",
          data: ["JD01", "JD02", "JD03", "JD04", "JD05", "JD06"],
        },
        series: [
          {
            type: "pie",
            center: ["40%", "60%"],
            radius: ["40%", "50%"],
            color: ["#A11B94", "#1E7FC3", "#87C233", "#F9972A", "#EEC80A", "#FD1F24"],
            startAngle: 0,
            labelLine: {
              show: false,
            },
            label: {
              normal: {
                formatter: "{per|{c}} ",
                backgroundColor: "rgba(255, 147, 38, 0)",
                borderColor: "transparent",
                borderRadius: 0,
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 22,
                    align: "center",
                  },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 1,
                    height: 0,
                  },
                  b: {
                    color: "#b3e5ff",
                    fontSize: 16,
                    lineHeight: 33,
                  },
                  c: {
                    fontSize: 14,
                    color: "#eee",
                  },
                  per: {
                    color: "#fff",
                    fontSize: 12,
                    padding: [0, 0],
                    borderRadius: 0,
                  },
                },
                textStyle: {
                  color: "#fff",
                  fontSize: 16,
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                formatter: "{per|{d}%}  ",
                backgroundColor: "rgba(255, 147, 38, 0)",
                borderColor: "transparent",
                borderRadius: 4,
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 22,
                    align: "center",
                  },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 1,
                    height: 0,
                  },
                  b: {
                    color: "#fff",
                    fontSize: 18,
                    lineHeight: 33,
                  },
                  c: {
                    fontSize: 14,
                    color: "#eee",
                  },
                  per: {
                    color: "#FDF44E",
                    fontSize: 25,
                    padding: [5, 6],
                    borderRadius: 2,
                  },
                },
              },
            },
            data: [
              {
                name: "JD01",
                value: 1246500,
              },
              {
                name: "JD02",
                value: 2542160,
              },
              {
                name: "JD03",
                value: 3548710,
              },
              {
                name: "JD04",
                value: 2545180,
              },
              {
                name: "JD05",
                value: 2659512,
              },
              {
                name: "JD06",
                value: 2452300,
              },
            ],
          },
          {
            type: "pie",
            center: ["40%", "60%"],
            radius: ["35%", "36%"],
            label: {
              show: false,
            },
            data: [
              {
                value: 78,
                name: "实例1",
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#9F17FF",
                        },
                        {
                          offset: 0.2,
                          color: "#01A4F7",
                        },
                        {
                          offset: 0.5,
                          color: "#FE2C8A",
                        },
                        {
                          offset: 0.8,
                          color: "#FEE449",
                        },
                        {
                          offset: 1,
                          color: "#00FFA8",
                        },
                      ],
                    },
                  },
                },
              },
            ],
          },
        ],
      },
      option12: {
        series: [
          {
            type: "pie",
            center: ["20%", "50%"],
            radius: ["50%", "60%"],
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: 25846120,
                name: "占位",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: "#48A7B8",
                  },
                },
                label: {
                  normal: {
                    textStyle: {
                      color: "#48A7B8",
                      fontSize: "12",
                      fontWeight: "bold",
                    },
                    formatter: "{c}\n\n实际产量",
                  },
                },
              },
            ],
          },
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["50%", "60%"],
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: 3657,
                name: "占位",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: "#A5303D",
                  },
                },
                label: {
                  normal: {
                    textStyle: {
                      color: "#A5303D",
                      fontSize: "12",
                      fontWeight: "bold",
                    },
                    formatter: "{c}\n\n不良品数量",
                  },
                },
              },
            ],
          },
          {
            type: "pie",
            center: ["80%", "50%"],
            radius: ["50%", "60%"],
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: 15426,
                name: "占位",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    color: "#98A032",
                  },
                },
                label: {
                  normal: {
                    textStyle: {
                      color: "#98A032",
                      fontSize: "14",
                      fontWeight: "bold",
                    },
                    formatter: "{c}\n\n剩余待产",
                  },
                },
              },
            ],
          },
        ],
      },
      option13: {
        color: ["#F8F759", "#597B5F", "#A2519B", "#3F63B6", "#D68660"],
        grid: {
          left: "5%",
          top: "28%",
          right: "8%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#fff",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          data: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00"],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
        },
        legend: {
          top: "15%",
          right: "5%",
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        series: [
          {
            name: "电压",
            type: "line",
            // stack: 'Ad',
            barWidth: 50,
            data: [13024, 6534, 8245, 13024, 6200, 8452, 8452],
          },
          {
            name: "电流",
            type: "line",
            // stack: 'Ad',
            data: [0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "温度",
            type: "line",
            // stack: 'Ad',
            data: [0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "噪音",
            type: "line",
            // stack: 'Ad',
            data: [0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: "气压",
            type: "line",
            // stack: 'Ad',
            data: [0, 0, 0, 0, 0, 0, 0],
          },
        ],
      },
    };
  },
  mounted() {
    this.initChart11();
    this.initChart12();
    this.initChart13();
  },
  methods: {
    initChart11() {
      let chartDom = this.$refs.chart11;
      let myChart = echarts.init(chartDom);
      myChart.setOption(this.option11);
    },
    initChart12() {
      let chartDom = this.$refs.chart12;
      let myChart = echarts.init(chartDom);
      myChart.setOption(this.option12);
    },
    initChart13() {
      let chartDom = this.$refs.chart13;
      let myChart = echarts.init(chartDom);
      myChart.setOption(this.option13);
    },
  },
};
</script>

<style lang="less">
#leftone {
  width: 720px;
  height: 340px;
  margin: 10px 10px;
  display: flex;

  .leftone-left{
    display: flex;
    width: 100%;
    height: 100%;

    .smBox{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;

      .left1,.left2{
          width: 100%;
          height: 100%;
        }
    }

    .right3{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
